<!--  -->
<template>
  <div class="basicinfo">
    <!-- <Header-Comp title="基本信息" /> -->
    <van-form ref="form" v-if="Number(data.storeNature) !== 1">
      <van-field name="img" v-if="Number(data.merchantType) !== 3">
        <template #input>
          <van-image :src="data.business" @click="sceneImg(data.business)" />
        </template>
      </van-field>
      <van-field :label="Number(tpye) === 1?'商户类型':'门店类型'" readonly>
        <template #input>
          <div v-for="( item,index) in mrcTypeList" :key="index">
            <span v-if="item.dictKey == data.merchantType">{{item.dictValue}}</span>
          </div>
        </template>
      </van-field>
      <van-field :label="Number(tpye) === 1?'商户全称':'门店全称'" readonly>
        <template #input>{{data.merchantFullName}}</template>
      </van-field>
      <van-field :label="Number(tpye) === 1?'商户简称':'门店简称'" readonly>
        <template #input>{{data.merchantAbbrName}}</template>
      </van-field>
      <van-field :label="Number(tpye) === 1?'商户编号':'门店编号'" readonly>
        <template #input>
          <div class="Copylist">
            <span>{{data.merchantNo}}</span>
            <div class="Copybtn" @click="handleCopy(data.merchantNo)">复制</div>
          </div>
        </template>
      </van-field>
      <van-field :label="Number($route.query.type) == 1?'开户类型':'分店类型'" readonly>
        <template #input>
          <div v-if="Number($route.query.type) == 1">商户</div>
          <div v-else>
            <span v-if="Number(data.storeNature) === 1">直营连锁门店</span>
            <span v-if="Number(data.storeNature) === 2">独立经营门店</span>
          </div>
        </template>
      </van-field>
      <van-field label="执照编号" readonly v-if="Number(data.merchantType) !== 3">
        <template #input>{{data.bizLicense}}</template>
      </van-field>
      <van-field label="经营范围" readonly>
        <template #input>{{data.bizScope}}</template>
      </van-field>
      <van-field label="Mcc" readonly>
        <template #input>{{data.mcc}}-{{mccname}}</template>
      </van-field>
      <van-field :label="Number(tpye) == 1?'经营地址':'门店地址'" readonly>
        <template
          #input
        >{{data.merchantProvinceName}}&nbsp;{{data.merchantCityName}}&nbsp;{{data.merchantDistrictName}}</template>
      </van-field>
      <van-field label="详细地址" readonly>
        <template #input>{{data.merchantAddress}}</template>
      </van-field>
      <van-field label="执照有效期" readonly v-if="Number(data.merchantType) !== 3">
        <template #input>{{data.bizLicenseExp}}</template>
      </van-field>
      <van-field label="开通时间" readonly>
        <template #input>
          <div v-if="Number($route.query.type) == 1">
            <div v-for="( item,index) in data.mrcRegister" :key="index">
              <span v-if="item.isFirst == 1 && data.regStatus == 5">{{item.openTime}}</span>
            </div>
          </div>
          <div v-else>
            <div v-if="Number(data.storeNature) === 1 && data.regStatus == 5">{{data.createTime}}</div>
            <div v-else>
              <div v-for="( item,index) in data.mrcRegister" :key="index">
                <span v-if="item.isFirst == 1 && data.regStatus == 5">{{item.openTime}}</span>
              </div>
            </div>
          </div>
        </template>
      </van-field>
      <van-field label="微信认证状态" readonly>
        <template #input>{{getWechatStatus}}</template>
      </van-field>
      <van-field label="支付宝认证状态" readonly>
        <template #input>{{getZfbStatus}}</template>
      </van-field>
    </van-form>
    <van-form ref="form" v-else>
      <van-field :label="Number(tpye) === 1?'商户全称':'门店全称'" readonly>
        <template #input>{{data.merchantFullName}}</template>
      </van-field>
      <van-field :label="Number(tpye) === 1?'商户简称':'门店简称'" readonly>
        <template #input>{{data.merchantAbbrName}}</template>
      </van-field>
      <van-field :label="Number(tpye) === 1?'商户编号':'门店编号'" readonly>
        <template #input>
          <div class="Copylist">
            <span>{{data.merchantNo}}</span>
            <div class="Copybtn" @click="handleCopy(data.merchantNo)">复制</div>
          </div>
        </template>
      </van-field>
      <van-field :label="Number($route.query.type) == 1?'开户类型':'分店类型'" readonly>
        <template #input>
          <div v-if="Number($route.query.type) == 1">商户</div>
          <div v-else>
            <span v-if="Number(data.storeNature) === 1">直营连锁门店</span>
            <span v-if="Number(data.storeNature) === 2">独立经营门店</span>
          </div>
        </template>
      </van-field>
      <van-field :label="Number(tpye) == 1?'经营地址':'门店地址'" readonly>
        <template
          #input
        >{{data.merchantProvinceName}}&nbsp;{{data.merchantCityName}}&nbsp;{{data.merchantDistrictName}}</template>
      </van-field>
      <van-field label="详细地址" readonly>
        <template #input>{{data.merchantAddress}}</template>
      </van-field>
      <van-field label="开通时间" readonly>
        <template #input>
          <div v-if="Number($route.query.type) == 1">
            <div v-for="( item,index) in data.mrcRegister" :key="index">
              <span v-if="item.isFirst == 1&& data.regStatus == 5">{{item.openTime}}</span>
            </div>
          </div>
          <div v-else>
            <div v-if="Number(data.storeNature) === 1&& data.regStatus == 5">{{data.createTime}}</div>
            <div v-else>
              <div v-for="( item,index) in data.mrcRegister" :key="index">
                <span v-if="item.isFirst == 1&& data.regStatus == 5">{{item.openTime}}</span>
              </div>
            </div>
          </div>
        </template>
      </van-field>
      <van-field label="微信认证状态" readonly>
        <template #input>{{getWechatStatus}}</template>
      </van-field>
      <van-field label="支付宝认证状态" readonly>
        <template #input>{{getZfbStatus}}</template>
      </van-field>
    </van-form>
  </div>
</template>

<script>
import { ImagePreview } from "vant";
import { mrctype, mccdetail } from "@/api/mreinfo";
import { copyText } from "@/utils/utils.js";
export default {
  components: {
    HeaderComp: () => import("@/components/HeaderComp")
  },
  data() {
    return {
      mrcTypeList: [],
      data: {
        mrcRegister: []
      },
      tpye: null,
      mccname: ""
    };
  },
  created() {
    // this.$route.query.type === 1 ? 'mrc_type' : 'store_nature_type'
    mrctype("mrc_type").then(res => {
      this.mrcTypeList = res.data;
    });

    var data = {
      id: this.$route.query.id,
      type: this.$route.query.type
    };
    this.tpye = this.$route.query.type;
    this.$store.dispatch("Getmrcdetail", data).then(res => {
      this.data = res;
      mccdetail(res.mcc).then(v => {
        this.mccname = v.data.name;
      });
      this.data.mrcAccountAttach.map(v => {
        if (v.fileType == "3") {
          this.data.business = v.watermarkImg;
        }
      });
    });
  },
  //方法集合
  methods: {
    handleCopy(val) {
      const rst = copyText(val);
      rst && this.$toast("复制成功");
    },
    // 图片预览
    sceneImg(images) {
      ImagePreview({
        images: [images], //需要预览的图片 URL 数组
        showIndex: false, //是否显示页码
        loop: false //是否开启循环播放
      });
    }
  },
  computed: {
    getWechatStatus() {
      const regist = this.data.mrcRegister;
      const status = regist.find(item => item.wechatStatus === 7);
      return status ? "已认证" : "未认证";
    },
    getZfbStatus() {
      const regist = this.data.mrcRegister;
      const status = regist.find(item => item.zfbCreditStatus === 7);
      return status ? "已认证" : "未认证";
    }
  }
};
</script>
<style lang='less' scoped>
.basicinfo {
  height: 100%;
  background: #f9f9f9;
  padding-bottom: 77px;
  border-top: 2px solid #d7d7d7;
  // border-top: 1px solid red;
  /deep/ .van-image {
    width: 100%;
    height: 400px;
    background: #191919;
    img {
      width: auto;
      margin: 0 auto;
    }
  }
  /deep/ .van-field__label {
    color: #3d3d3d;
  }
  /deep/ .van-field__control {
    color: #131313;
  }
}
.Copylist {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.Copybtn {
  background: #ffb72f;
  border-radius: 10px;
  font-size: 22px;
  color: #fff;
  padding: 0px 10px;
}
</style>